<template>
  <div class="points-task-center">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="邻里社区积分商城"
        :left-arrow="true"
        class="navbar"
        @click-left="onClickLeft"
    >
      <template #right>
        <van-button
            round
            size="small"
            type="info"
            class="points-btn"
            @click="mypoints"
        >
          <van-icon name="diamond" size="16" />
          我的积分: {{ data.user.points }}
        </van-button>
      </template>
    </van-nav-bar>

    <!-- 页面标题 -->
    <van-cell title="积分任务中心" :border="false" class="page-title" />
    <van-cell
        :border="false"
        class="page-desc"
    >
      完成以下任务可以获得积分，积分可用于兑换商城商品
    </van-cell>
<!--    onclick="showPage('checkin-task')"-->
    <div class="task-card" >
      <div class="task-header">
        <div class="task-icon">
          <i class="fas fa-calendar-check"></i>
        </div>
        <div class="task-title">每日签到</div>
      </div>
      <div class="task-content">
        <p class="task-desc">每天签到可获得积分，连续签到有额外奖励</p>
        <div class="task-points">
          <i class="fas fa-coins"></i>
          <span>+5 积分/天</span>
        </div>
        <div class="task-footer">
          <div class="task-status">{{data.signIn == true ? "今日已签到" : "可以签到哦"}}</div>
          <button @click= "sign" class="task-btn">
            <span>签到</span>
          </button>
        </div>
      </div>
      <div class="task-card" >
        <div class="task-header">
          <div class="task-icon">
            <i class="fas fa-calendar-check"></i>
          </div>
          <div class="task-title">发帖</div>
        </div>
        <div class="task-content">
          <p class="task-desc">发帖，可以得到额外的积分哦</p>
          <div class="task-points">
            <i class="fas fa-coins"></i>
            <span>+5 积分/条</span>
          </div>
          <div class="task-footer">
            <div class="task-status">快去发帖吧</div>
            <button @click= "post" class="task-btn">
              <span>发帖</span>
            </button>
          </div>
        </div>
      </div>

    </div>

  </div>

</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import axios from "@/utils/axios";
import {reactive, onMounted, ref} from "vue";

const router = useRouter();
const route = useRoute();
const userId = route.query.uid;
const data = reactive({
  user: {
    userId: 0,
    phone: '',
    originalpwd: '',
    password: '',
    salt: '',
    repwdTimes: 0,
    nickname: '',
    avatar: '',
    building: '',
    unit: '',
    room: '',
    points: 0,
    createdAt: '',
    updatedAt: '',
    status: 0
  },
  signIn: false
})
const sign = () =>{
  if (!data.signIn){
    data.user.points += 5;
    axios.post("/api/users/updateUser", data.user)
        .then(res => {
          if (res.code == 200){
            console.log("签到成功");
            data.signIn = true;
          }
        })
  }
}
const post = () => {
  // 路由跳转, 跳转到 +
  router.push({name: "fab", query:{uid: userId}})
}
const onClickLeft = () => {
  router.back()
}
const mypoints = () => {
  router.push({name: "myPoints", query:{uid: userId}})
}
const init = () => {

  console.log("用户Id: ", userId);
  axios.get(`/api/users/getOneUsers/${userId}`)
      .then(res => {
        if (res.code == 200){
          console.log("用户数据: ", res.data);
          data.user = res.data;
        }
      })
}
onMounted( () => {
  init();
})

</script>

<style scoped>
.navbar {
  background: linear-gradient(90deg, #536dfe, #673ab7);
}
.task-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin: 30px 0;
}

.task-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.task-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.task-header {
  padding: 20px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  display: flex;
  align-items: center;
  gap: 15px;
}
.task-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.task-status {
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 15px;
  background: #f0f5ff;
  color: #3498db;
}

.task-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.task-btn:hover {
  background: #2980b9;
}
.task-title {
  font-size: 18px;
  font-weight: 600;
}

.task-content {
  padding: 20px;
}

.task-desc {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 15px;
}

.task-points {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 15px;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.points-btn {
  margin-right: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: transparent;
}

.task-btn {
  background-color: #00b42a;
  border-color: transparent;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  padding: 16px 16px 8px;
}

.page-desc {
  color: #666;
  padding: 0 16px 16px;
}

.task-cards {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.task-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.task-title {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 500;
}

.task-icon {
  margin-right: 6px;
  color: #673ab7;
}

.task-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
  flex-grow: 1;
}

.task-reward {
  color: #ff4d4f;
  font-size: 13px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.task-reward span {
  margin-left: 4px;
}

.task-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-text {
  font-size: 12px;
  color: #888;
}

.action-btn {
  padding: 4px 12px;
}

.back-btn {
  margin: 0 16px 24px;
  width: calc(100% - 32px);
}

.detail-title {
  font-size: 16px;
  font-weight: 500;
  padding: 16px;
  display: flex;
  align-items: center;
}

.detail-reward {
  margin-left: 8px;
  color: #ff4d4f;
}

.detail-desc {
  color: #666;
  padding: 0 16px 16px;
  line-height: 1.5;
}

.rules-collapse {
  margin: 0 16px 24px;
}

.rules-list {
  padding-left: 20px;
}

.rules-list li {
  margin-bottom: 8px;
  color: #666;
}
</style>
